<template>
  <div>
    <van-nav-bar left-text="商城" />
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img style="width: 100%; height: 200px;" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <van-card
      v-for="item in data"
      :key="item.id"
      :desc="item.name"
      :title="item.title"
      :thumb="item.url"
      @click="Xiang1(item)"
    />
  </div>
</template>

<script setup>
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg",
];
import { ref } from "vue";
import { showToast } from "vant";
import axios from "axios";
import router from "@/router";
// import Xiang from "../xiang/xiang.vue";
const value = ref("");
const onSearch = (val) => showToast(val);
const onCancel = () => showToast("取消");

let data = ref("");
const goget = async () => {
  const resp = await axios.get("/api/room/list");
  console.log("resp", resp.data);
  data.value = resp.data.data.list;
};
const Xiang1 = (v) => {
  router.push({
    path: "xiang",
    query: v,
  });
};
goget();
</script>

<style lang="scss" scoped>
</style>